<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>DOM操作-练习</title>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
			}
			
			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 300px;
			}
			
			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}
			
			.center {
				text-align: center;
			}
		</style>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

	</head>


	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="myTable">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr id="row2">
				<td>看得见风景的房间</td>
				<td class="center">&yen;30.00</td>
			</tr>
			<tr id="row3">
				<td>60个瞬间</td>
				<td class="center">&yen;32.00</td>
			</tr>
		</table>
		<input name="b1" type="button" value="增加一行" onclick="addRow()" />
		<input name="b2" type="button" value="删除第2行" onclick="delRow()" />
		<input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
		<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />

	</body>
	<script>
		function addRow() {
			
			var fRow =$("#row3");
			//创建行节点
			var newRow =$("<tr></tr>");
			 //创建单元格节点
			//为单元格添加文本
			var col1 =$("<td>幸福从天而降</td>");
			
			var col2 =$("<td>18.50</td>").attr("align","center");
			
			newRow.append(col1);
			newRow.append(col2);
			
			$("#myTable tr:last").after(newRow);
		}
		function updateRow() {
			
			var uRow =$("#row1");
			
			uRow.css({fontWeight:"bold",textAlign:"center",backgroundColor: "#cccccc"})
		}
		function delRow() {
		
			var dRow =$("tr"); //访问被删除的行
			if(dRow[2]!=null){
				
				$(dRow[2]).remove();//删除行
			}
		}
		function copyRow() {
			
			var oldRow = $("#row3");//访问复制的行
			
			var newRow =oldRow.clone(true)//复制指定的行及子节点
			
		$("#myTable:last").append(newRow);//在指定节点的末尾添加行
		}
		
		</script>
</html>